<template>
  <el-dialog
    title="配置信息"
    :visible.sync="dialogVisible"
    width="40%"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
  >
    <el-table v-loading="loading" :data="tableList">
      <el-table-column
        label="海图名称"
        align="center"
        key="cellName"
        prop="cellName"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="有效期" align="center">
        <template slot-scope="scope">
          {{ dateFormat(new Date(scope.row.expiryDate)) }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getPage"
    />
  </el-dialog>
</template>

<script>
import sysMixins from "@/mixins/sysMixins";
import { initPermitForm } from "./options";
import { dateFormat } from "@/utils/date";
import { getPage } from "@/api/sys/permit";
export default {
  components: {},
  mixins: [sysMixins],
  data() {
    return {
      queryParams: initPermitForm(),
      dialogVisible: false,
      userInfo: {},
      loading: false,
      tableList: [],
    };
  },
  methods: {
    dateFormat,
    open(row) {
      this.userInfo = { ...row };
      this.dialogVisible = true;
      this.getPage();
    },
    handleClose() {
      this.userInfo = {};
      this.queryParams = initPermitForm();
      this.tableList = [];
    },
    getPage() {
      this.loading = true;
      getPage({ ...this.queryParams, permit: this.userInfo.userKey }).then(
        ({ data }) => {
          this.tableList = data.records;
          this.total = data.total;
          this.loading = false;
        }
      );
    },
  },
};
</script>

<style></style>
